<template>
    <div>
        <i v-show="!show" @click="show=!show" class="fa fa-angle-double-right showright" aria-hidden="true"></i>
        <i v-show="show"  @click="show=!show" class="fa fa-angle-double-left showleft" aria-hidden="true"></i>
        <transition
            enter-active-class="animate__animated animate__fadeInLeft"
            leave-active-class="animate__animated animate__fadeOutLeft"
        >
            <div  v-show="show" class="player" >
                <!-- 音乐播放 -->
                <!-- 不加controls属性 默认播放器会隐藏 autoplay-->
                <audio  autoplay :src="`https://music.163.com/song/media/outer/url?id=${currentMusic.id}.mp3`"
                    @timeupdate="timeupdate"
                    @play="playState=true"
                    @pause="playState=false"
                    @ended="$emit('changeMusic','next')"
                    ref="player"
                >
                <!-- @ended 进度条播到最后 自动下一首 -->
                </audio>
                <!-- animationPlayState  -->
                <div class="minibar">
                    <img :src="currentMusic.picUrl" :style="{animationPlayState:playState?'running':'paused'}"/>
                    <h5 @click="showFull=true">
                        <span :style="{animationPlayState:playState?'running':'paused'}">
                            {{currentMusic.name}}-
                            <b v-for="artist in currentMusic.song.artists" :key="artist.id">{{artist.name}}</b>
                        </span>
                    </h5>
                    <!-- 播放按钮 fa-pause play-->
                    <i class="playbtn" @click="playState=!playState">
                        <!-- <i :class="['fa', {'fa-play':!playState},{'fa-pause':playState} ]" aria-hidden="true"></i> -->
                        <i :class="['fa', playState == false ? 'fa-play':'fa-pause' ]" aria-hidden="true"></i>
                        <canvas ref="circleCavans" width=50 height=50></canvas>
                    </i>
                </div>
                
                    <div class="fullScreen">
                        <transition
                            enter-active-class="animate__animated animate__fadeIn"
                            leave-active-class="animate__animated animate__fadeOut"
                        >
                        <full-screen v-if="showFull"
                            @hidefull="showFull=$event" 
                            :currentMusic="currentMusic"
                            :currentTime="currentTime"
                            :duration="duration"
                            @changeTime="changeTime"
                            :playState="playState"
                            @playpause="playState=!playState"
                            :playList="playList"
                            @changeMusic="$emit('changeMusic',$event)"
                        ></full-screen>
                        </transition>

                    </div>
            </div>
        </transition>
    </div>
</template>
<script>
import FullScreen from '@/components/FullScreen';
export default {
    props:{
        currentMusic:{
            type:Object,
            default:null,
        },
        playList:Array,
    },
    data(){
        return {
            cxt:null, //存储cavans画布
            playState:true,  //播放状态
            showFull:false,
            currentTime:0,  //存储当前播放时间
            show:true, //底部播放条显隐
            duration:0  //总时长
        }
    },
    mounted(){
        //开启2d环境,获取cavans画布上下文
        this.cxt=this.$refs.circleCavans.getContext("2d");
    },
    methods:{
        changeTime(event){
            this.$refs.player.currentTime=event;
        },
        // timeupdate事件,
        timeupdate(e){ //e事件对象
            let ctime=e.target.currentTime;  //当前播放时间
            let totalTime=e.target.duration;  //总时长
            this.drawCircle(ctime,totalTime);
            this.currentTime=ctime;
            this.duration=totalTime
            
            // console.log("当前播放时间==>",e.target.currentTime,"总时长=>",e.target.duration);
        },
        // 只有播放起来才开始画
        drawCircle(ctime,total){
            this.cxt.clearRect(0,0,50,50);
            this.cxt.beginPath();
            this.cxt.arc(25,25,20,0,2*Math.PI);//arc(x,y,半径,开始弧度,结束弧度)
            this.cxt.strokeStyle="#c2c2c0";
            this.cxt.lineWidth=3;
            this.cxt.stroke();
            this.cxt.closePath();
            // 求当前结束弧度
            let rdu=ctime/total*2*Math.PI;//当前时间/总时间 * 2π弧度
            this.cxt.beginPath();
            this.cxt.strokeStyle="#7a7a3f";
            this.cxt.arc(25,25,20,-Math.PI/2,rdu-Math.PI/2);
            // this.cxt.arc(25,25,20,0,rdu);
            this.cxt.lineWidth=3;
            this.cxt.stroke();
            this.cxt.closePath();
        },
    },
    // created(){
    //     // 查看currentMusic数据
    //     // console.log("currentMusic==>",this.currentMusic);
    // },
    watch:{
        playState(newValue){
            if(newValue){
                this.$refs.player.play();
            }else{
                this.$refs.player.pause();
            }
        }
    },
    components:{
        FullScreen
    }
    
}
</script>
<style lang="less" scoped>
.showright,.showleft{
    display: inline-block;
    width: 30px;
    height: 40px;
    // background-color: rgba(250, 235, 215, 0.651);
    color: rgba(142, 143, 143, 0.753);
    font-size: 40px;
    text-align: center;
    position: fixed;
    bottom: 60px;
    z-index: 9;
    background:#f6f4f2;
}

.player{
    // 
    position:fixed;
    bottom: 0px;
    z-index: 9;
    // background: #69cfcf;
    // background: #f1f1ee;
    background: linear-gradient(to right,#f6f6f3,#edf5f8);
    width: 100vw;
    .minibar{
        height: 60px;
        display: flex;
        align-items: center;
        border-style: solid;
        border-width: 1px 0px 1px 0px;
        border-color: #ddddca;
        
        img{
            width: 50px;
            height: 50px;
            display: block;
            border-radius: 50%;
            animation: roll 10s linear infinite;
        }
        h5{
            flex: 1;
            overflow: hidden;
            margin: 0px 10px;
            span{
                display: inline-block;
                animation: hua 10s linear infinite;
                b{
                    line-height: 30px;
                }
            }
        }
        i{
            &.playbtn{
                position: relative;
                .fa-play{
                    position: absolute;
                    right: 14px;
                    bottom: 17px;
                    font-size: 20px;
                    // color: #006eff;
                    color: #c2c2c0;
                }
                .fa-pause{
                    position: absolute;
                    right: 16px;
                    bottom: 17px;
                    font-size: 20px;
                    // color: #006eff;
                    color: #c2c2c0;
                }
               
            }
        }
        
    }
    @keyframes roll{
        from{
            transform: rotate(0deg);
        }to{
            transform: rotate(360deg);
        }
    }
    @keyframes hua {
        from{
            transform: translateX(-100%);
        }to{
            transform: translateX(150%);
        }
    }
}
</style>